<template>
    <div class="view-container">
        <div class="content-container">
            <div class="content-images">
                <img v-for="(item, index) in detail.photoUrl.split(',')" :key="index" :src="item">
                <img v-for="(item, index) in detail.photoUrl.split(',')" :key="index" :src="item">
            </div>
        </div>
        <div style="margin-top: 30px;">
            <hr style="border: 1px solid gray;">
            <div>
                <!-- <span>当前平台暂未开启照片墙评论区</span> -->
                <el-result icon="info" title="信息提示" subTitle="当前平台暂未开启照片墙评论区,请联系区域负责人">

                </el-result>
            </div>
        </div>
    </div>
</template>

<script>
import {GET_PHOTODETAIL} from "@/api/photo" 
export default {
    name: 'SchoolForumPhotoDetail',

    data() {
        return {
            photoId:0,
            detail:{}
        };
    },

    mounted() {
        this.photoId = this.$route.query.id;
        this.getPhotoDetail(this.photoId)
    },

    methods: {
        getPhotoDetail(id){
            GET_PHOTODETAIL(id).then(res=>{
                console.log(res);
                this.detail = res
            })
        }
    },
};
</script>

<style lang="scss" scoped>
.view-container{
    // border: 1px solid red;
    width: 97%;
    height: 94%;
    overflow: auto;
    padding: 20px;
    background-color: rgba(254, 249, 249, 0.6);
    
    .content-container{
        overflow:auto;
        // padding: 20px;

        .content-images{
            display: flex;
            flex-flow: row;
            flex-wrap: nowrap;
            align-items: center;
            height: 300px;
            width: 25%;
            // justify-content:center;
            img{
                // width: 33%;
                width: 100%;
                height: 100%;
                object-fit:cover;
                margin: 10px;
                margin-top: 0px;
            }
            img:nth-child(1){
                margin-left: 0px !important;
            }
        }
    }
}
</style>